<template>
    <div>
        <el-breadcrumb>
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item v-breadcrumb-certify></el-breadcrumb-item>
        </el-breadcrumb>
        <div class="content">
            <heading grade="1">发布服务</heading>
            <el-row>
                <el-col :span="6" v-for="item in matchList" :key="item">
                    <router-link class="sport-item" :to="`/service/release/${item.path}`">
                        <x-img :src="item.imgUrl" alt="" />
                        <div class="m_name">{{item.name}}</div>
                    </router-link>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  export default{
    computed: {
      ...mapGetters({
        global: 'global'
      })
    },
    data () {
      return {
        matchList: [
        // 暂时隐藏
          {
            imgUrl: '/static/images/service/type/product.png',
            name: '商品',
            path: 'product'
          },
          {
            imgUrl: '/static/images/service/type/activity.png',
            name: '活动',
            path: 'activity'
          }
        ]
      }
    },
    methods: {}
  }
</script>

<style lang="scss" scoped>
    a {
        text-decoration: none;
    }

    .app-container {
        min-height: 960px
    }

    .sport-item {
        text-align: center;
        width: 100%;
        display: block;
    }

    .m_title {
        line-height: 100%;
        font-size: 18px;
        color: #333;
        border-left: 4px solid #01a87c;
        margin-left: 40px;
        padding: 2px 0 2px 10px
    }

    .m_name {
        line-height: 100%;
        padding: 25px 0;
        color: #333;
        font-size: 14px
    }
</style>
